<!doctype html>
<html>

<head>
    <title>数组扩展功能展示</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="./static/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="./static/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
    <script src="./static/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="./static/vue/2.2.2/vue.min.js" type="text/javascript"></script>
    <script src="./static/lang/array.js" type="text/javascript"></script>
</head>

<body>
    <div id="app">
        <table id="" class="table table-bordered table-hover">
            <caption>数组扩展功能展示</caption>
            <thead>
                <tr>
                    <th>名称</th>
                    <th>表达式</th>
                    <th>结果</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(row,index) in rows">
                    <td>{{row.name}}</td>
                    <td><code>{{row.expr | json}}</code></td>
                    <td><code>{{parseExpression(index)}}</code><small>{{row.remark}}</small></td>
                </tr>
            </tbody>
        </table>
    </div>

</body>

</html>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: function() {
            return {
                rows: [{
                    name: '查找-位置',
                    expr: '[0,1,2,3,5].indexOf(5)'
                }, {
                    name: '添加-后追加',
                    expr: '[0,1,2,3].append(4)'
                }, {
                    name: '添加-PUSH（闭包）',
                    expr: '(function(){var v=[0,1,2,3];v.push(4);return v;})()'
                }, {
                    name: '添加-PUSH',
                    expr: '[0,1,2,3].push(4)',
                    remark: '返回总长度'
                }, {
                    name: '插入',
                    expr: '[0,1,2,3].insertAt(1,4)'
                }, {
                    name: '删除',
                    expr: '[0,1,2,3].removeAt(1)'
                }, {
                    name: '删除',
                    expr: '[0,1,2,3].remove([1,2])'
                }, {
                    name: '删除-对象',
                    expr: '[{n:"赵一",v:18},{n:"钱二",v:24},{n:"孙三",v:21}].remove({n:"钱二",v:24})'
                }, {
                    name: '删除-对象',
                    expr: '(function(){var v=[{n:"赵一",v:18},{n:"钱二",v:24},{n:"孙三",v:21}];v.remove(v[1]);return v;})()'
                }, {
                    name: '合并-简单对象',
                    expr: '[0,1,2,3].merge(4)'
                }, {
                    name: '合并-简单对象-去除重复',
                    expr: '[0,1,2,3].merge([3,4,5])'
                }, {
                    name: '合并-简单对象-不去重',
                    expr: '[0,1,2,3].concat([3,4,5])'
                }, {
                    name: '合并-复杂对象',
                    expr: '[{n:"赵一",v:18},{n:"钱二",v:24},{n:"孙三",v:21}].merge({n:"李四",v:22})'
                }, {
                    name: '交换对象',
                    expr: '[{n:"赵一",v:18},{n:"钱二",v:24},{n:"孙三",v:21}].swap(0,2)'
                }, {
                    name: '去重-简单数据',
                    expr: '[0,1,2,3,2,3,5].uniquelize()'
                }, {
                    name: '集合-差集',
                    expr: '[1,2,3,4].minus([3,4,5,6])'
                }, {
                    name: '集合-并集',
                    expr: '[1,2,3,4].union([3,4,5,6])'
                }, {
                    name: '集合-交集',
                    expr: '[1,2,3,4].intersect([3,4,5,6])'
                }, {
                    name: '复杂对象-去重',
                    expr: '[{n:"赵一",v:18},{n:"钱二",v:24},{n:"孙三",v:21},{n:"赵一",v:18}].uniquelize()'
                }, {
                    name: '复杂对象-差集',
                    expr: '[{n:"赵一",v:18},{n:"钱二",v:24},{n:"孙三",v:21},{n:"赵一",v:18}].minus([{n:"孙三",v:21},{n:"赵一",v:18}])'
                }]
            };
        },
        created: function() {

        },
        mounted: function() {

        },
        methods: {
            parseExpression: function(i) {
                var vm = this;
                var expr = vm.rows[i].expr;
                // console.log(expr);
                try {
                    return eval(expr);
                } catch (e) {
                    // console.log(1, e);
                    console.error(e);
                }
            }
        }
    });
</script>